const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const nodeExternals = require('webpack-node-externals')
const ManifestPlugin = require('./ManifestPlugin')

module.exports = [
  {
    entry: {
      index: './src/pages/Index/index.tsx'
    },
    output: {
      path: path.resolve('./dist/assets'),
      filename: 'scripts/[name].[contenthash:6].js',
      publicPath: '/'
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js']
    },
    mode: 'development',
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          loader: 'ts-loader'
        },
        {
          test: /\.module.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]-[hash:5]'
                }
              }
            }
          ]
        },
        {
          test: /\.css$/,
          exclude: /\.module.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
        },
        {
          test: /\.(jpg|png|svg|ico)$/,
          loader: 'file-loader',
          options: {
            name: 'imgs/[name].[contenthash:6].[ext]'
          }
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: 'styles/[name].[contenthash:6].css'
      }),
      new ManifestPlugin()
    ]
  },
  {
    entry: {
      index: './src/index.ts'
    },
    output: {
      path: path.resolve('./dist/assets'),
      filename: '../[name].js',
      publicPath: '/'
    },
    externals: [nodeExternals()],
    resolve: {
      extensions: ['.ts', '.tsx', '.js']
    },
    target: 'node',
    mode: 'development',
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          loader: 'ts-loader'
        },
        {
          test: /\.module.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[local]-[hash:5]'
                }
              }
            }
          ]
        },
        {
          test: /\.css$/,
          exclude: /\.module.css$/,
          loader: 'css-loader'
        },
        {
          test: /\.(jpg|png|svg|ico)$/,
          loader: 'file-loader',
          options: {
            name: 'imgs/[name].[contenthash:6].[ext]'
          }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'styles/[name].[contenthash:6].css'
      })
    ]
  }
]
